<template>
  <div>
    <!-- 头部导航 -->
    <top :f1="true" :f2="false"></top>
    <!-- 主体部分 -->
    <!-- 加载 -->
     <van-loading color="#1989fa" /><van-loading type="spinner" color="#1989fa" v-if="isend" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-card
        v-for="item in newsList"
        :key="item.id"
        :title="item.title"
        :thumb="item.img_url"
        @click="godetail(item.id)"
      >
        <div slot="num">点击：{{ item.click }}</div>
        <div slot="price">发表时间：{{ item.add_time.substr(0, 10) }}</div>
      </van-card>
    </van-pull-refresh>
    <!-- 底部导航 -->
    <bottom></bottom>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
      isLoading: false,
      isend: true
    }
  },
  created() {
    this.getNewList()
  },
  methods: {
    getNewList() {
      setTimeout(async () => {
        var { data: res } = await this.axios.get('/api/getnewslist')
        console.log(res)
        if (res.status !== 0) {
          return this.$toast('获取新闻列表失败')
        }
        this.newsList = res.message
        this.isend = false
        if (this.isLoading) {
          this.$toast('刷新成功')
          this.isLoading = false
        }
      }, 1000)
    },
    onRefresh() {
      this.getNewList()
    },
    godetail(id) {
      this.$router.push(`news/detail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-card {
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 10px;
  position: relative;
  top: -18px;
  .van-card__thumb {
    width: 42px;
    height: 42px;
  }
  .van-card__content {
    min-height: 0px;
  }
  .van-card__title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
  }
  .van-card__bottom,
  .van-card__price {
    color: #226aff;
    line-height: 30px;
  }
  .van-card__title {
    height: 17px;
  }
}
.van-loading {
  text-align: center;
  margin: 10px 0px;
}
</style>
